//清除浮动
@mixin clearfix {
  zoom: 1;
  &:before, &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
}

//用指定的方式显示模盒
//取值
//content-box	这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
//border-box	为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
//inherit	规定应从父元素继承 box-sizing 属性的值。
@mixin box-sizing($boxmodel) {
  -webkit-box-sizing: $boxmodel;
  -moz-box-sizing: $boxmodel;
  box-sizing: $boxmodel;
}

//box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
//取值
//h-shadow	必需。水平阴影的位置。允许负值。
//v-shadow	必需。垂直阴影的位置。允许负值。
//blur	可选。模糊距离。
//spread	可选。阴影的尺寸。
//color	可选。阴影的颜色。请参阅 CSS 颜色值。
//inset	可选。将外部阴影 (outset) 改为内部阴影。
@mixin box-shadow($shadow) {
  -moz-box-shadow: $shadow;
  -webkit-box-shadow: $shadow;
  box-shadow: $shadow;
}

//允许您使元素看上去像标准的用户界面元素。一般用于清除表单默认样式
//取值
//normal	将元素呈现为常规元素。
//icon	将元素呈现为图标（小图片）。
//window	将元素呈现为视口。
//button	将元素呈现为按钮。
//menu	将元素呈现为一套供用户选择的选项。
//field	将元素呈现为输入字段。
@mixin appearance($appearance) {
  -webkit-appearance: $appearance;
  -moz-appearance: $appearance;
  appearance: $appearance;
  //&::-ms-expand { display: none; }
}

//设置或检索是否允许用户选中文本。
//取值：
//none：文本不能被选择
//text：可以选择文本
//all：当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。
//element：可以选择文本，但选择范围受元素边界的约束
@mixin user-select($user-select) {
  -webkit-user-select: $user-select;
  -moz-user-select: $user-select;
  -ms-user-select: $user-select;
  user-select: $user-select;
}

//背景渐变
//参考http://www.w3cplus.com/content/css3-gradient
@mixin background-gradient($top,$bottom) {
  background: -webkit-linear-gradient(top, $top 0, $bottom 100%);
  background: -moz-linear-gradient(top, $top 0, $bottom 100%);
  background: -o-linear-gradient(top, $top 0, $bottom 100%);
  background: linear-gradient(to bottom, $top 0, $bottom 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$top, endColorstr=$bottom, GradientType=0);
}

//设置元素的不透明级别。
//取值
//value	 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。	测试
//inherit	应该从父元素继承 opacity 属性的值。
@mixin opacity($opacity) {
  opacity: $opacity;
  filter: "alpha(opacity = #{$opacity*100})";
}

//单行省略
@mixin text-line($line) {
  overflow: hidden;
  @if ($line == 1) {
    white-space: nowrap;
    text-overflow: ellipsis;
  } @else if ($line >= 2) {
    display: -webkit-box;
    white-space: normal;
    -webkit-line-clamp: $line;
    -webkit-box-orient: vertical;
  }

}

//tab 焦点切换
@mixin tab-focus() {
// Default
  outline: thin dotted;
// WebKit
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}


//flex 居中
@mixin flex-center(){
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  text-align: center;
}
